<!--
 * @Author: wangshuguang
 * @Date: 2022-04-11 15:49:47
 * @LastEditTime: 2022-09-14 18:51:12
 * @LastEditors: wangshuguang
 * @Description: 退款相关弹框
-->
<template>
  <div class="refundDialog">
    <el-dialog
      title="申请退款"
      :visible.sync="refundVisible"
      append-to-body
      width="40%"
      :before-close="refundClose"
    >
      <el-form ref="form" :model="refundForm" label-width="80px">
        <el-form-item label="退款金额" prop="money">
          <el-row v-if="canInputMoney">
            <el-col :span="20">
              <el-input v-model="refundForm.money" type="number" size="small" placeholder="请输入退款金额" />
              <span>最多可退：￥{{ dataForm['canRefAmt'] }}</span>
            </el-col>
            <el-col :span="4">
              <el-button type="text" @click="refundAll">全部退款</el-button>
            </el-col>
          </el-row>
          <div v-else>
            <div>￥{{ dataForm['canRefAmt'] }}</div>
            <div>*仅支持全额退款</div>
          </div>
        </el-form-item>
        <el-form-item label="退款备注" prop="remark">
          <el-input v-model="refundForm.remark" placeholder="请输入退款备注" size="small" type="textarea" />
          <div v-show="infoConfig.generalFlag == 1" class="redTip">注：此交易关联的业务订单已超出维权期，退款成功后不会收回奖励、退回优惠</div>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="refundClose()">取消</el-button>
          <el-button type="primary" size="small" @click="showPwdModal">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="验证身份"
      :visible.sync="pwdVisible"
      append-to-body
      width="40%"
      :before-close="pwdClose"
    >
      <el-form ref="form" :model="refundForm" label-width="80px">
        <el-form-item label="登录密码">
          <el-input v-model="refundForm.pwd" size="small" placeholder="请输入登录密码" />
          <span>*验证登录密码成功后会直接发起退款</span>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="pwdClose()">取消</el-button>
          <el-button type="primary" size="small" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  chkLoginPwd,
  orderRefund
} from '@/api/payCenter'
export default {
  props: {
    value: {},
    infoConfig: {}
  },
  data() {
    return {
      dataForm: {},
      pwdVisible: false,
      refundForm: {
        pwd: '',
        remark: '',
        money: ''
      }
    }
  },
  computed: {
    canInputMoney() {
      // 是否能自定义金额
      const { subsidyFee, paymentMethod } = this.dataForm
      console.log('this.dataForm', this.dataForm)
      // 余额支付，允许部分退款
      if (paymentMethod == 2) {
        return true
      } else if (['1', '3'].includes(paymentMethod + '')) {
        // 微信支付宝支付 根据是否使用补贴判断  使用补贴仅支持整单退款
        return subsidyFee == 0
      } else {
        return false
      }
    },
    refundVisible: {
      get() {
        console.log('refundVisible', this)
        return this.value
      },
      set(val) { this.$emit('input', val) }
    }
  },
  watch: {
    refundVisible() {
      console.log('infoConfig', this.infoConfig, this.refundVisible)
      if (this.refundVisible) {
        this.dataForm = {
          ...this.infoConfig
        }
        if (!this.canInputMoney) {
          this.refundForm.money = this.dataForm['canRefAmt']
        } else {
          this.refundForm.money = ''
        }

        // 限制条件优化
        const { paymentTime, paymentMethod, type } = this.dataForm
        // 1、业务类型为：码牌支付/收款类型
        const businessTypeValid = ['14', '15'].includes(type)
        // 2、支付方式为：微信/支付宝
        const payTypeValid = ['1', '3'].includes(paymentMethod + '')
        // 3、交易时间非当天
        const sameDayValid = this.$momentMini(paymentTime).format('YYYY-MM-DD') != this.$momentMini().format('YYYY-MM-DD')

        // 同时满足以上三个条件，提示超出时效
        if (businessTypeValid && payTypeValid && sameDayValid) {
          // 如果是非当天交易 直接提示超时效
          this.$alert('此订单超出退款时效，无法发起退款', '提示', {
            confirmButtonText: '确定'
          })
          this.refundVisible = false
        }
      }
    }
  },
  methods: {
    modalClose() {
      this.pwdVisible = false
      this.refundVisible = false
      this.$emit('sucClose')
    },
    showPwdModal() {
      const { remark, money } = this.refundForm
      if (!money && money != 0) {
        this.$message.error('请输入退款金额')
        return
      } else if (money < 0) {
        this.$message.error('退款金额不能小于0')
        return
      } else if (money > +this.dataForm['canRefAmt']) {
        this.$message.error('退款金额不能大于最多可退金额')
        return
      }
      this.pwdVisible = true
    },
    pwdClose(done) {
      this.pwdVisible = false
      this.refundForm.pwd = ''
      if (done) done()
    },
    refundClose(done) {
      this.refundVisible = false
      this.refundForm.money = ''
      this.refundForm.remark = ''
      if (done) done()
    },
    refundAll() {
      // 全部退款
      this.$set(this.refundForm, 'money', this.dataForm['canRefAmt'] * 1)
    },
    submit() {
      const { pwd } = this.refundForm
      const { pluginCode, status } = this.dataForm
      if (!pwd) {
        this.$message.error('请输入登录密码')
        return
      }
      // 校验登录密码
      chkLoginPwd({ password: pwd }).then(res => {
        console.log('res', res)
        if (pluginCode != 0 && status == 4) {
          this.$alert('此订单超出退款时效，无法发起退款', '申请退款失败', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            callback: () => {
              this.modalClose()
            }
          })
        } else {
          // 订单退款
          this.orderRefund()
        }
      })
    },

    orderRefund() {
      const { remark, money, pwd } = this.refundForm
      const { type, status, orderNo, generalFlag } = this.dataForm
      console.log('type', type)
      orderRefund({
        remark, money, pwd, type, status, orderNo, generalFlag
      }).then(res => {
        this.$message.success('操作成功')
        this.modalClose()
      })
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .redTip{
    color: #D9001B;
  }
</style>
